<template>
    <div class="treeNav">
        <nav>
            <span v-for = '(item, index) in dimensionData' :key = "index" @click = "chooseDimension(item)" 
            >
                {{item.name}}
            </span>

        </nav>
        <Tab1 v-show ="dementionFlag.showFlag" :choosedProductItem = "choosedProductItem" :dementionFlag= 'dementionFlag'>
        </Tab1>
        <Tab2 v-show = "dementionFlag.showFlags" :choosedOtherDimention = "choosedOtherDimention" :dementionFlag= 'dementionFlag'></Tab2>
        
    </div>
</template>
<script>
import Tab1 from '@/Demo/isDemo/Tab1'
import Tab2 from '@/Demo/isDemo/Tab2'
export default {
	components: {
		Tab1,
		Tab2,
	},
	data() {
		return {
			dementionFlag: {
				showFlag: false,
				showFlags: false,
			},

			choosedProductItem: {},
			choosedOtherDimention: {},
			dimensionData: [
				{
					name: '产品',
					code: 'product',
					subList: [
						{
							name: '车险',
							code: 'CX',
							subList: [
								{
									name: '商用',
									code: 'SY',
									subList: [
										{
											name: '新车',
											code: 'XC',
										},
										{
											name: '旧车',
											code: 'JC',
										},
										{
											name: '次新车',
											code: 'CXC',
										},
									],
								},
								{
									name: '家用',
									code: 'JY',
								},
							],
						},
						{
							name: '财产险',
							code: 'CCX',
						},
						{
							name: '意健险',
							code: 'YJX',
						},
					],
				},
				{
					name: '渠道',
					code: 'channel',
					subList: [
						{
							name: '车商',
							code: 'CS',
						},
						{
							name: '综拓',
							code: 'ZT',
						},
						{
							name: '创展',
							code: 'CZ',
						},
						{
							name: '团体',
							code: 'TT',
						},
						{
							name: '其他',
							code: 'QT',
						},
					],
				},
				{
					name: '新转续',
					code: 'renew',
					subList: [
						{
							name: '新转序1',
							code: 'xzx1',
						},
						{
							name: '新转序2',
							code: 'xzx2',
						},
						{
							name: '新转序3',
							code: 'xzx3',
						},
					],
				},
			],
		}
	},
	methods: {
		chooseDimension(item) {
			if (item.code === 'product') {
				this.dementionFlag.showFlag = true
				this.dementionFlag.showFlags = false
				this.choosedProductItem = item
				this.choosedOtherDimention = []
			} else {
				this.dementionFlag.showFlags = true
				this.dementionFlag.showFlag = false
				this.choosedOtherDimention = item
				this.choosedProductItem = []
			}
		},
	},
}
</script>
 <style scoped>
.treeNav nav {
	display: flex;
	height: 40px;
	border-bottom: 1px solid #dcdcdc;
	border-top: 1px solid #dcdcdc;
	line-height: 40px;
}
.treeNav span {
	flex: 1;
	min-width: 33.3%;
	border-right: 1px solid #e5e5e5;
}
.treeNav span:last-child {
	border-right: none;
}
</style>
